import { Button, Input, Toast } from 'antd-mobile'
import './Login.scss'
import { useState } from 'react'
import { UserOutline, UnlockOutline } from 'antd-mobile-icons'

import { useDispatch } from 'react-redux'
import { namePswlogin } from '../../../store/modules/user'
import type { AppDispatch } from '../../../store'
import { useNavigate } from 'react-router-dom'
const Login = () => {
    const [username, setUsername] = useState('')
    const [password, setPassword] = useState('')
    const navigator = useNavigate()

    const data = {
        clientInfo: {
            uniPlatform: 'web',
            appId: '__UNI__440C36C',
        },
        uniIdToken: "",
        params: {
            username,
            password
        }
    };
    const dispatch = useDispatch<AppDispatch>()
    const subLogin = async () => {
        try {
            const resAction = await dispatch(namePswlogin(data))
            console.log(resAction)
            if (namePswlogin.fulfilled.match(resAction)) {
                Toast.show({
                    content: '登录成功！'
                })
                setTimeout(() => {
                    navigator('/personal')
                }, 1000);
            }
        } catch (error) {
            console.log(error)
        }
    }


    return <div className='login'>
        <div className='icon'>
            <UserOutline fontSize={60} color='blue' />
        </div>
        <div className='ipt'>
            <UserOutline fontSize={20} />
            <Input placeholder='请输入用户名' className='userName' type='text' value={username} onChange={(e) => setUsername(e)} />
        </div>
        <div className='ipt'>
            <UnlockOutline fontSize={20} />
            <Input className='password' placeholder='请输入密码' type='password' value={password} onChange={(e) => setPassword(e)} />
        </div>
        <div className='register'><span>注册账号</span></div>
        <div className='sub'>
            <Button onClick={subLogin} color='primary' className='btn'>登录</Button>
        </div>
    </div>
}

export { Login }